<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff" :isLeft="true">
      <template #title><text style="color: #fff">选择物料</text></template>
    </GlobalTopBar>
    <view class="tops">
      <SearchInput
        placeholder="请输入物料名称"
        @search="handleSearch"
        @clear="clearFun"
        color="#16BAAA"
      />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <!-- 列表内容 -->
      <scroll-view
        class="scroll-Y flex_content"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <view
          class="center_li"
          v-for="(item, index) in listData"
          :key="index + 1"
          @click="(isShow = true), (datas = { ...item })"
        >
          <view class="border_b li_tops">
            物料编码：{{ item.material_variant_number }}
          </view>
          <view class="title">{{ item.material_title }}</view>
          <view class="flex jb"
            ><text>规格型号：{{ item.material_variant_title }}</text></view
          >
          <view class="flex jb"
            ><text>品牌：{{ item.material_brand }}</text
            ><text
              >售价：<text class="textac"
                >￥{{
                  item.material_variant_sales_price || item.sales_price
                }}</text
              >
            </text></view
          >
        </view>

        <view class="worder_box flex_center" v-if="!listData.length">
          <image :src="`${store.imgDomain}kucun_1.png`" mode="widthFix" />
          <text>暂无物料</text>
        </view>
      </scroll-view>
    </view>
    <view class="flexpop" :class="{ ac: isShow }">
      <view class="center_pop">
        <image
          @click="isShow = false"
          class="close_img"
          :src="`${store.imgDomain}close.png`"
          mode="scaleToFill"
        />
        <view class="border_b">
          <input v-model="nums" type="number" placeholder="请输入数量" />
        </view>
        <view class="btnbox">
          <view class="qx" @click="isShow = false">取消</view>
          <view class="tj" @click="tjFun">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onBeforeMount, watch, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import SearchInput from '@/components/SearchInput.vue';

const jdform = reactive({
  service_order_id: '',
  refuse_reason: '',
  refuse_desc: '',
  historyscore_reduce: '',
});
const isShow = ref(false);
const searchResult = ref('');
const store = useCounterStore();
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
const items = ref({});
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const datas = ref({});
const fromDttas = reactive({
  balance_payment_amount: '',
  balance_payment_remark: '',
});

//
const getServiceOrderListByWorkStatus = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  const url =
    types.value === 1
      ? 'worker/warehouse/getMaterialVariantList'
      : 'worker/warehouse/getWorkerRelationMaterialInventoryList';
  try {
    const data = await request(url, {
      keywords: searchResult.value,
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    console.log(999, data);

    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 复制文本
const copyFun = (text) => {
  // 复制文本到剪贴板
  uni.setClipboardData({
    data: text, // 要复制的文本
    success: function () {
      console.log('复制成功');
      // 可添加提示信息（如 Toast）
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
    },
    fail: function (err) {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      });
    },
  });
};

// 预览图片
const previewFun = (list, index) => {
  uni.previewImage({
    current: index,
    urls: list,
    loop: true,
  });
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getServiceOrderListByWorkStatus(true);
};
// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getServiceOrderListByWorkStatus();
};
// 处理搜索事件
const handleSearch = (keyword) => {
  searchResult.value = keyword;
  getServiceOrderListByWorkStatus(true);
};

const clearFun = () => {
  searchResult.value = '';
  pageNum.value = 1;
  getServiceOrderListByWorkStatus(true);
};
const nums = ref('');
const tjFun = () => {
  if (nums.value <= 0) {
    uni.showToast({
      title: '请输入正确的数量',
      icon: 'none',
    });
    return;
  }
  if (datas.value.count != undefined && +nums.value > +datas.value.count) {
    uni.showToast({
      title: '输入数量大于库存，请重新输入',
      icon: 'none',
    });
    return;
  }
  uni.navigateBack({
    delta: 1,
  });
  store.navigateBackData = { ...datas.value, count: +nums.value };
};
const types = ref(1);

onLoad((option) => {
  types.value = +option.type || 1;
  store.navigateBackData = {};
  // getServiceOrderListByWorkStatus(true);
});
</script>

<style lang="scss" scoped>
.topbars {
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}

.tops {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #16baaa;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #16baaa;
      }
    }
  }
}
.scroll-Y {
  height: 72vh;
}
.libox {
  border-radius: 20rpx;
  border: 1rpx solid #71cdc4;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  // font-size: 24rpx;
  .libox_tops {
    padding-bottom: 25rpx;
    margin-bottom: 20rpx;

    .t1 {
      color: #999;
      &.ac {
        color: #437ef6;
        text-decoration: underline;
      }
    }
    .t2 {
      color: #ff7800;
    }
  }
  .li_center {
    padding-bottom: 20rpx;
    .cen_img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
      margin-right: 40rpx;
    }
    .cen_text_box {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 40rpx;
    }
    .cen_sl {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        width: max-content;
      }
    }
    .times {
      margin-top: 10rpx;
      .times_t1 {
        color: $uni-text-color-grey;
        margin-right: 10rpx;
      }
    }
  }
  .khinfo {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
  }
  .wtms {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
    .gzimg {
      width: 105rpx;
      height: 105rpx;
      margin-right: 10rpx;
      border-radius: 5rpx;
    }
  }
  .sfbox {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2 {
      display: flex;
      justify-content: space-between;
    }
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
    .khinfo_v2_t2 {
      font-weight: 500;
    }
  }
  .fw_btn {
    padding: 20rpx 0 0;
    color: #fff;
    justify-content: flex-end;
    .btns {
      line-height: 46rpx;
      border-radius: 23rpx;
      width: max-content;
      padding: 0 30rpx;
      background-color: #15cbb9;
      border: 1rpx solid #15cbb9;
      &.ac {
        background-color: transparent;
        color: #15cbb9;
      }
    }
    .jdbtn {
      border: 1rpx solid #999;
      color: #999;
      margin-right: 10rpx;
      line-height: 46rpx;
      border-radius: 23rpx;
      width: max-content;
      padding: 0 30rpx;
    }
  }
}
.v_h2 {
  margin-bottom: 20rpx;
}
.fwbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  &.ac {
    opacity: 1;
    pointer-events: all;
  }
  .fw_center {
    position: relative;
    width: 90%;
    border: 1rpx solid #9e9e9e;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .t1 {
      font-size: 30rpx;
      margin-bottom: 40rpx;
    }
    .t2 {
      margin-bottom: 20rpx;
    }
    .imgbox {
      .libox {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .btnbox {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      view {
        line-height: 46rpx;
        border-radius: 23rpx;
        padding: 0 50rpx;
      }
      .qx {
        color: #14c7b6;
        border: 1rpx solid #14c7b6;
      }
      .tj {
        margin-left: 20rpx;
        color: #fff;
        background-color: #15c9b7;
        border: 1rpx solid #15c9b7;
      }
    }
  }
}
.worder_box {
  flex-direction: column;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  image {
    width: 300rpx;
    margin-bottom: -40rpx;
  }
  text {
    color: $uni-text-color-grey;
  }
}

.flexpop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  &.ac {
    display: block;
  }
  .center_pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .close_img {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 62rpx;
      height: 62rpx;
    }
    .border_b {
      margin-top: 40rpx;
      padding: 10rpx 0;
    }
  }
}

.flex_content {
  box-sizing: border-box;

  .content_li {
    padding: 20rpx 0;
  }
}
.btnbox {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  view {
    line-height: 46rpx;
    border-radius: 23rpx;
    padding: 0 50rpx;
  }
  .qx {
    color: #14c7b6;
    border: 1rpx solid #14c7b6;
  }
  .tj {
    margin-left: 20rpx;
    color: #fff;
    background-color: #15c9b7;
    border: 1rpx solid #15c9b7;
  }
}

.center_li {
  background-color: #fff;
  padding: 20rpx;
  border: 1rpx solid #7fd2cb;
  box-sizing: border-box;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  .li_tops {
    box-sizing: border-box;
    padding: 0 0 20rpx 0;
    margin-bottom: 20rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: 600;
  }
  .jb {
    justify-content: space-between;
    margin-top: 10rpx;
  }
  .textac {
    color: #fb0201;
    font-size: 30rpx;
  }
}
</style>
